<template>
  <div class="select">
    <div>
      <ul class="ul1">
        <li class="li1" v-for="(item, index) in lists" :key="index">
          <div class="title">{{ item.title }}</div>
          <ul>
            <li
              class="li2"
              v-for="(i, num) in item.content"
              :key="num"
              :class="{ bgcolor: idx == i.text }"
              @click="changeBgcolor(i)"
            >
              {{ i.text }}
            </li>
          </ul>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import { Bus } from "../../Bus";
export default {
  data() {
    return {
      lists: [
        {
          title: "登录用户",
          content: [
            {
              num: 0,
              text: "",
            },
          ],
        },
        {
          title: "系统操作",
          content: [
            {
              num: 1,
              text: "清除本地数据",
            },
            {
              num: 2,
              text: "修改登录密码",
            },
            {
              num: 3,
              text: "修改我的信息",
            },
            {
              num: 4,
              text: "退出登录",
            },
          ],
        },
      ],
      idx: "",
      cnum: "",
      isShowDialog1: true,
      isShowDialog2: true,
      showselect:false,
    };
  },
  mounted() {
    this.getNickname();
  },
  methods: {
    changeBgcolor(i) {
      Bus.$emit("showselect",this.showselect);
      this.cnum = i.num;
      if (this.cnum == 1) {
      }
      if (this.cnum == 2) {
        this.isShowDialog1 = true;
        Bus.$emit("isShowDialog1",this.isShowDialog1);
      }
      if (this.cnum == 3) {
        this.isShowDialog2 = true;
        Bus.$emit("isShowDialog2",this.isShowDialog2);
      }
      if (this.cnum == 4) {//退出登录
        localStorage.clear()
        this.$message({message: "退出成功",type: "success",duration: 1500,onClose:()=>{
          this.$router.push('/login')
        }});
      }
    },
    getNickname() {
      this.lists[0].content[0].text = this.$store.state.usermsg.username;
    },
  },
};
</script>
<style lang="less" scoped>
ul {
  margin: 0px;
  padding: 0px;
  background-color: #fff;
}
.ul1 {
  padding-top: 20px;
}
li {
  list-style: none;
}
.li1 {
  width: 150px;
}
.li2 {
  height: 50px;
  line-height: 50px;
  padding-left: 10px;
}
.li2:hover {
  color: blue;
}
.title {
  margin-left: 20px;
  text-align: left;
  color: rgb(167, 161, 161);
}
.bgcolor {
  background-color: rgb(197, 241, 197);
}
</style>